$f: 19.2;

.home {
  .section1 {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0.00) 0%, #F5F5F5 100%);
    padding: 160/$f+vw 240/$f+vw;
    display: flex;
    justify-content: space-between;

    .l {
      width: 640/$f+vw;

      .t {
        color: rgba(0, 0, 0, 0.9);
        font-size: 20/$f+vw;
        width: 258/$f+vw;
        border-bottom: 2/$f+vw solid rgba(5, 18, 40, .6);
        padding-bottom: 4/$f+vw;
      }

      .t2 {
        margin: 40/$f+vw 0 56/$f+vw 0;
        color: rgba(0, 0, 0, 0.9);
        line-height: 1.5;
        font-size: 50/$f+vw;
        letter-spacing: 0.1px;
        font-family: "Montserrat";
        font-weight: 300;

      }

      .des {
        color: rgba(0, 0, 0, 0.6);
        width: 100%;
        font-size: 18/$f+vw;
        text-align: justify;
        line-height: 1.5;
        letter-spacing: 0.1px;
      }
    }

    .r {
      overflow: hidden;

      img {
        width: 738/$f+vw;
        height: 456/$f+vw;
        object-fit: cover;
        border-radius: 20/$f+vw;
        transition: all 600ms ease-in-out;
      }

      &:hover {
        img {
          transform: scale(1.05);
        }
      }
    }
  }
  .section2 {
    padding: 268/$f+vw 0 124/$f+vw;
    .wrap {
        width: 1440/$f+vw;
        margin: 0 auto;
        .swiper_box {
            position: relative;
            .btn {
                width: 1500/$f+vw;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 10;
                transform: translate(-50%, -50%);
                pointer-events: none;
                .swiper_btn {
                    width: 60/$f+vw;
                    height: 60/$f+vw;
                    background: #ffffff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: 0.6s;
                    cursor: pointer;
                    pointer-events: auto;
                    img {
                        display: block;
                        width: 16/$f+vw;
                        transition: 0.6s;
                    }
                    &:hover {
                        background: #000;
                        img {
                            filter: invert(1);
                        }
                    }
                    &:nth-child(2) {
                        transform: rotate(180deg);
                        background: #000;
                        img {
                            filter: invert(1);
                        }
                        &:hover {
                            background: #fff;
                            img {
                                filter: invert(0);
                            }
                        }
                    }
                }
            }
            .sec2_swiper {
                width: 100%;
                overflow: hidden;
                padding: 22/$f+vw 0 0;
                .swiper-wrapper {
                    .swiper-slide {
                        position: relative;
                        .num {
                            width: 42/$f+vw;
                            height: 42/$f+vw;
                            border: 1px solid #d9d9d9;
                            border-radius: 50%;
                            color: rgba(0, 0, 0, 0.90);
                            font-size: 20/$f+vw;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: absolute;
                            left: 30/$f+vw;
                            top: -21/$f+vw;
                            background: #ffffff;
                            transition: 0.6s;
                        }
                        .item {
                            width: 100%;
                            height: 253/$f+vw;
                            border-radius: 20/$f+vw;
                            background: #F5F5F5;
                            border: 1px solid #F5F5F5;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 32/$f+vw 0 0;
                            transition: 0.6s;
                            .icon {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 88/$f+vw;
                                height: 88/$f+vw;
                                border-radius: 50%;
                                border: 1px solid #d9d9d9;
                                background: #ffffff;
                                margin: 0 0 30/$f+vw;
                                img {
                                    display: block;
                                    max-width: 40/$f+vw;

                                }
                            }
                            p {
                                color: rgba(0, 0, 0, 0.90);
                                text-align: center;
                                font-size: 24/$f+vw;
                                font-weight: 500;
                                line-height: 150%; /* 36px */
                                transition: 0.6s;
                            }
                        }
                        &.on,&:hover {
                            .num {
                                background: #3FAEEE;
                                border: 1px solid #3FAEEE;
                                color: #ffffff;
                            }
                            .item {
                                background: #DDF2FF;
                                border: 1px solid #3FAEEE;
                                p {
                                    color: #0EA6FE;
                                }
                            }
                        }
                    }
                }
            }
        }
        .control {
            margin: 60/$f+vw 0 0;
            display: flex;
            justify-content: space-between;
            .control_item {
                position: relative;
                z-index: 1;
                .control_item_sq {
                    width: 466/$f+vw;
                    height: 100%;
                    border-radius: 20/$f+vw;
                    border: 2px solid #fff;
                    box-shadow: 4/$f+vw 4/$f+vw 30/$f+vw rgba(0, 0, 0, 0.06);
                    background: #fff;
                    padding: 36/$f+vw 36/$f+vw 20/$f+vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    transition: 0.6s;
                    cursor: pointer;
                    ul {
                        margin: 0 0 27/$f+vw;
                        li {
                            color: rgba(0, 0, 0, 0.90);
                            font-size: 19/$f+vw;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 150%; /* 30px */
                            padding: 0 0 0 12/$f+vw;
                            position: relative;
                            &::after {
                                content: "";
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                                background: #000;
                                position: absolute;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                            &:not(:nth-last-child(1)) {
                                margin-bottom: 12/$f+vw;
                            }
                        }
                    }
                    .control_item_bottom {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 16/$f+vw 0 0;
                        border-top: 1px solid rgba(0, 0, 0, 0.10);
                        h5 {
                            color: rgba(0, 0, 0, 0.90);
                            font-size: 24/$f+vw;
                            font-weight: 500;
                            line-height: 150%; /* 36px */
                            margin: 0;
                        }
                        .icon {
                            img {
                                width: 32/$f+vw;
                            }
                        }
                    }
                    &:hover {
                        border: 2px solid #3DB8FF;
                    }
                    &:hover {
                        transform: scale(1.1);
                    }
                }
                &.on {
                    .control_item_sq {
                        border: 2px solid #3DB8FF;
                    }
                }
                &:hover {
                    z-index: 3;
                }
            }
        }
    }
  }
  .ph {
    display: none !important;
  }
  .section3 {
    background: #F5F5F5;
    padding: 90/$f+vw 0 86/$f+vw;
    position: relative;
    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        .logo1 {
            position: absolute;
            top: 68/$f+vw;
            right: 74/$f+vw;
            width: 263/$f+vw;
            img {
                display: block;
                width: 100%;
            }
        }
        .logo2 {
            position: absolute;
            bottom: 31/$f+vw;
            left: 530/$f+vw;
            width: 191/$f+vw;
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .wrap {
        width: 1440/$f+vw;
        margin: 0 auto;
        position: relative;
        padding: 0 40/$f+vw 0 0;
        z-index: 3;
        h1 {
            font-size: 40/$f+vw;
            font-weight: 300;
            color: rgba(0, 0, 0, 0.90);
            text-align: center;
            margin: 0 0 90/$f+vw;
            font-family: Montserrat;

        }
        .flex {
            display: flex;
            justify-content: space-between;
            .item {
                width: 340/$f+vw;
                .icon {
                    width: 97/$f+vw;
                    img {
                        display: block;
                        width: 100%;
                    }
                }
                h5 {
                    font-size: 24/$f+vw;
                    color: rgba(0, 0, 0, 0.90);
                    font-weight: 500;
                    margin: 50px 0 15px;
                }
                p {
                    color: rgba(0, 0, 0, 0.90);
                    font-size: 18/$f+vw;
                    font-weight: 300;
                    line-height: 150%; /* 27px */
                }
            }
        }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .ph {
        display: block !important;
    }
    .pc {
        display: none !important;
    }
    .section1{
      padding: 20px 5%;
      flex-direction: column;
      .l{
        width: 100%;
        .t{
          font-size: 20px;
          width: 80%;
          border-bottom: 2px solid rgba(5,18,40,0.6);
          padding-bottom: 4px;
        }
        .t2{
          margin: 20px 0;
          font-size: 24px;
          line-height: 1.3;
        }
        .des{
          font-size: 16px;
          line-height: 1.3;
        }
      }
      .r{
        width: 100%;
        margin-top: 20px;
        img{
          width: 100%;
          height: auto;
          border-radius: 20px;
        }
      }
    }
    .section2 {
        .wrap {
            width: 90%;
            margin: 0 auto;
            .controlList {
                margin: 60/$f+vw 0 0;
                display: flex;
                justify-content: space-between;
                .control_item_box {
                    margin-bottom: 20px;
                    .control_item1 {
                        width: 100%;
                        border-radius: 10px;
                        border: 2px solid #fff;
                        box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.06);
                        background: #fff;
                        padding: 20px 15px 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        transition: 0.6s;
                        cursor: pointer;
                        ul {
                            margin: 0 0 20px;
                            li {
                                color: rgba(0, 0, 0, 0.90);
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 150%; /* 30px */
                                padding: 0 0 0 12px;
                                position: relative;
                                &::after {
                                    content: "";
                                    width: 4px;
                                    height: 4px;
                                    border-radius: 50%;
                                    background: #000;
                                    position: absolute;
                                    left: 0;
                                    top: 11px;
                                }
                                &:not(:nth-last-child(1)) {
                                    margin-bottom: 12px;
                                }
                            }
                        }
                        .control_item_bottom {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 10px 0 0;
                            border-top: 1px solid rgba(0, 0, 0, 0.10);
                            h5 {
                                color: rgba(0, 0, 0, 0.90);
                                font-size: 18px;
                                font-weight: 500;
                                line-height: 150%; /* 36px */
                                margin: 0;
                            }
                            .icon {
                                img {
                                    width: 24px;
                                }
                            }
                        }
                        &:hover,&.on {
                            border: 2px solid #3DB8FF;
                        }
                    }
                    .flex {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        margin: 10px 0 0;
                        .item {
                            width: 49%;
                            height: 45vw;
                            border-radius: 20/$f+vw;
                            background: #F5F5F5;
                            border: 1px solid #F5F5F5;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 9vw 0 0;
                            transition: 0.6s;
                            margin-bottom: 2vw;
                            .icon {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 60px;
                                height: 60px;
                                border-radius: 50%;
                                border: 1px solid #d9d9d9;
                                background: #ffffff;
                                margin: 0 0 30/$f+vw;
                                img {
                                    display: block;
                                    max-width: 24px;

                                }
                            }
                            p {
                                color: rgba(0, 0, 0, 0.90);
                                text-align: center;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 150%; /* 36px */
                                transition: 0.6s;
                            }
                        }
                    }
                }
            }
        }
    }
    .section3 {
        padding: 40px 0 10px;
        .bg {
            .logo1 {
                top: 109px;
                right: 15%;
                width: 101px;
            }
            .logo2 {
                bottom: 30px;
                left: 20%;
                width: 118px;
            }
        }
        .wrap {
            width: 90%;
            margin: 0 auto;
            h1 {
                font-size: 24px;
                margin: 0 0 30px;
            }
            .flex {
                flex-wrap: wrap;
                .item {
                    width: 100%;
                    text-align: center;
                    margin: 0 0 40px;
                    .icon {
                        width: 60px;
                        margin: 0 auto 15px;
                    }
                    h5 {
                        font-size: 18px;
                        margin: 0 0 10px;
                    }
                    p {
                        font-size: 14px;
                        line-height: 1.4;
                    }
                }
            }
        }
    }
  }
}